<template>
  <div class="box">
    <form>
      <van-cell-group>
        <!-- <van-field  
  type="number"
  label="手机号"
  right-icon="question-o"
  placeholder="请输入用户名"
  @click-right-icon="$toast('question')"
        />-->
        <van-field
          v-model="username"
          type="number"
          label="用户名"
          right-icon="question-o"
          placeholder="请输入登录手机号"
          @click-right-icon="$toast('question')"
          @touchstart.native.stop="show = true"
        />
        <!--  <van-number-keyboard
      v-model="username"
      :show="show"
      :maxlength="11"
  @blur="show = false"
        />-->
        <van-field
          autocomplete="tel"
          v-model="password"
          type="password"
          label="密码"
          placeholder="请输入密码"
        />
      </van-cell-group>
      <p class="hint">忘记密码</p>
    </form>
        <div class="login">
          <p>
            <van-button @click="submit" color="#ff9900" type="primary">登录</van-button>
            
          </p>
        </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import getData from "@/assets/js/axios.js";
import store from "@/store";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      show: false,
      username: "",
      password: ""
    };
  },
  // beforeRouteEnter((to, from, next) => {
  //  // ${//does NOT have access to `this` component instance}

  // });
  methods: {
    submit() {
      //let arr=[];
      //let obj={
      //  mm:'小明',
      //  age:18
      //};
      //arr.push(obj);
      //设置本地存储
      //localStorage.setItem("arr",JSON.stringify(arr))
      //获取本地存储
      //获取tocken
      //console.log(store.state.msg)
      
      if (this.username.length < 11 || this.username.length > 11) {
        return Toast("请输入11位手机号");
      }
      if (this.password.length < 6) {
        return Toast("请输入6位以上密码");
      }
      let _this = this;
      let para = {
        mobile: this.username,
        password: this.password
      };
      getData
        .login(para)
        .then(res => {
          // console.log(res, "fasongle");
          localStorage.setItem("uid", res.data.data.uid);

          //this.$router.go(-1);
          //this.$router.back(-1);
          //this.$router.push('/home');

          let client = {};
          client = {
            uid: res.data.data.uid,
            grade: res.data.data.grade,
            client_phone: res.data.data.client_phone
          };

          // console.log(res.data.data.token, "gengixn更新的tocken");
          //更新状态

          if (res.data.code == 2000) {
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem("client", JSON.stringify(client));
            store.commit("userToken", res.data.data.token);
            store.commit("userClient", client);
            this.$router.push("home");
          }
          Toast(res.data.msg);

        })
        .catch(err => {});
    }
  }
};
</script>
<style lang="" scoped>
.box {
  background-color: #ffffff;
  padding-top: 2.4rem;
}

.hint {
  display: flex;
  justify-content: flex-end;
}

.login {
  height: 2rem;
  display: flex;
  /* justify-content:center; */
  align-items: center;
}

.login p {
  margin: 0 auto;
}

.login p button {
  width: 6rem;
  height: 1rem;
}

.login p button span {
  font-size: 0.4rem;
}
</style>